import { Graph } from '../../../src';

const div = document.createElement('div');
div.id = 'watermarker-spec';
document.body.appendChild(div);

describe('add addWatermark', () => {
  it('text watermark', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      modes: {
        default: ['drag-node', 'drag-canvas']
      }
    })

    const data = {
      nodes: [
        {
          id: 'node1',
          label: 'nodeWithWatermark',
          x: 100,
          y: 100
        }
      ]
    }
    
    graph.data(data)
    graph.render()

    // 此时没有水印，也就没有水印的容器
    let waterMarker = graph.get('graphWaterMarker')
    expect(waterMarker).toBe(undefined)

    let children = document.getElementById('watermarker-spec').children
    expect(children.length).toBe(1)

    graph.setTextWaterMarker(['antv', 'G6'])
    waterMarker = graph.get('graphWaterMarker')
    expect(waterMarker).not.toBe(undefined)
    children = document.getElementById('watermarker-spec').children
    expect(children.length).toBe(3)
    expect(children[1].style.display).toEqual('none')
    expect(children[1].style.width).toEqual('150px')
    expect(children[1].style.height).toEqual('100px')
    // expect(children[2].style.backgroundImage).toEqual("url(\"\")")

    graph.destroy()
  })

  it('image watermark', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      modes: {
        default: ['drag-node', 'drag-canvas']
      }
    })

    const data = {
      nodes: [
        {
          id: 'node1',
          label: 'nodeWithWatermark',
          x: 100,
          y: 100
        }
      ]
    }
    
    graph.data(data)
    graph.render()

    // 此时没有水印，也就没有水印的容器
    let waterMarker = graph.get('graphWaterMarker')
    expect(waterMarker).toBe(undefined)

    let children = document.getElementById('watermarker-spec').children
    expect(children.length).toBe(1)

    graph.setImageWaterMarker()
    waterMarker = graph.get('graphWaterMarker')
    expect(waterMarker).not.toBe(undefined)
    children = document.getElementById('watermarker-spec').children
    // 此时 div 元素还没有被创建
    expect(children.length).toBe(2)
    expect(children[1].style.display).toEqual('none')
    expect(children[1].style.width).toEqual('150px')
    expect(children[1].style.height).toEqual('130px')
    graph.destroy()
  })

  it('text watermark width config param', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      modes: {
        default: ['drag-node', 'drag-canvas']
      }
    })

    const data = {
      nodes: [
        {
          id: 'node1',
          label: 'nodeWithWatermark',
          x: 100,
          y: 100
        }
      ]
    }
    
    graph.data(data)
    graph.render()

    // 此时没有水印，也就没有水印的容器
    let waterMarker = graph.get('graphWaterMarker')
    expect(waterMarker).toBe(undefined)

    let children = document.getElementById('watermarker-spec').children
    expect(children.length).toBe(1)

    graph.setTextWaterMarker(['antv', 'G6'], {
      width: 80,
      height: 60,
      text: {
        fill: 'red',
        rotate: 45
      }
    })
    waterMarker = graph.get('graphWaterMarker')
    expect(waterMarker).not.toBe(undefined)
    children = document.getElementById('watermarker-spec').children
    expect(children.length).toBe(3)
    expect(children[1].style.display).toEqual('none')
    expect(children[1].style.width).toEqual('80px')
    expect(children[1].style.height).toEqual('60px')
    // expect(children[2].style.backgroundImage).toEqual("url(\"\")")

    graph.destroy()
  })
})